import React, { ReactNode, createContext, useCallback, useContext, useEffect, useState } from "react";
import { GetConfig } from "../../wailsjs/go/config/AppConfig";
import { types } from "../../wailsjs/go/models";
import { useTranslation } from "react-i18next";

interface Config {
    theme: string;
    language: string;
    width: number;
    height: number;
    connects: types.Connect[];
}
interface AppConTextType {
    flexNum: number;
    setFlexNum?: React.Dispatch<React.SetStateAction<number>>;
    config?: Config | null;
    themeChange?: (theme: string) => void;
    handleLanguageChange?: (language: string) => Promise<void>;
    handleMenuSelect?: (menu: string) => void;
    handleChange?: (conn: types.Connect) => void;

}
const AppContext = createContext<AppConTextType>({
    flexNum: 80
});

export const AppProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
    const [config, setConfig] = useState<Config | null>(null);
    const [flexNum, setFlexNum] = useState<number>(80);
    // 设置config的值
    const handleChange = useCallback(async (conn: types.Connect) => {
        if (config == null || config?.connects.length == 0) {
            const initialConfig: Config = {
                theme: 'light',
                language: 'en',
                width: 800,
                height: 600,
                connects: [conn], // connects 数组只包含这一个新连接
            };
            setConfig(initialConfig);
            return
        }
        // 更新
        const updatedConnects = config.connects.map(c => c.name === conn.name ? conn : c)
        // 新增
        if (!config?.connects.some(c => c.name === conn.name)) {
            updatedConnects?.push(conn)
        }
        setConfig({
            ...config,
            connects: updatedConnects
        })
    }, [])
    // 主题切换
    const themeChange = useCallback((theme: string) => {
        setConfig(prevConfig => {
            if (!prevConfig) return null;
            return { ...prevConfig, theme }
        });
    }, []);
    // 语言切换
    const { i18n } = useTranslation()
    const handleLanguageChange = useCallback(async (language: string) => {
        i18n.changeLanguage(language);
    }, []);
    // 菜单选择
    const handleMenuSelect = useCallback((menu: string) => {
        // console.log("选择的菜单：", menu);
        // 在这里可以添加菜单选择后的逻辑
    }, []);
    // 初始化加载配置
    const loadConfig = async () => {
        const cfg = await GetConfig();
        setConfig(cfg);
    };
    useEffect(() => {
        loadConfig();
    }, []);
    return (
        <AppContext.Provider value={{
            config,
            themeChange,
            handleLanguageChange,
            handleMenuSelect,
            flexNum,
            setFlexNum,
            handleChange
        }}>{children}</AppContext.Provider>
    )
}

export const useAppContext = () => {
    const context = useContext(AppContext);
    if (!context) {
        throw new Error('useAppContext must be used within an AppProvider');
    }
    return context
};